<style>
    #hometotal-search {
        margin-left: 10px;
        float: left;
        line-height: 30px;
    }
    
    #mychar-show {
        float: left;
    }
    
    .show-date-line {
        width: 80%;
        height: 50px;
        margin-top: 15px;
    }
    
    .show-tittle-value {
        width: 14.2%;
        height: 100%;
        float: left;
        text-align: center;
    }
    
    .show-line-title,
    .show-line-value {
        width: 100%;
        float: left;
        height: 50%;
        text-align: center;
        line-height: 25px;
    }
    
    .show-line-title {
        font-size: 16px;
        color: #009688;
        font-weight: bold;
    }
    
    #show-distributors {
        float: left;
        padding: 15px;
        width: 100%;
        height: 100%;
    }
</style>

<div id="dhh-hometotal" class="show_page_content">
    <div class="top_btn">
        <div class="input-line auto_20">
            <label for="">日期:</label>
            <input type="text" placeholder="请输入开始时间" class="stime">
        </div>
        <div class="input-line auto_20">
            <label for="" style="float:left;text-align: center">--</label>
            <input type="text" placeholder="请输入结束时间" class="etime">
        </div>
        <div class="layui-btn input-line" id="hometotal-search"><i class="fa fa-search"></i>查看最近7天统计</div>
    </div>
    <div class="show-date-line">
        <div class="show-tittle-value">
            <span class="show-line-title">今日UV</span>
            <span class="show-line-value" id="uv">	
                            </span>
        </div>
        <div class="show-tittle-value">
            <span class="show-line-title">今日注册</span>
            <span class="show-line-value" id="zhuce">
                                </span>
        </div>
        <div class="show-tittle-value">
            <span class="show-line-title">今日激活</span>
            <span class="show-line-value " id="acts">	
                                </span>
        </div>
        <div class="show-tittle-value">
            <span class="show-line-title">今日实名</span>
            <span class="show-line-value" id="reals">	
                                </span>
        </div>
        <div class="show-tittle-value">
            <span class="show-line-title">注册率</span>
            <span class="show-line-value" id="reg_rate"></span>
        </div>
        <div class="show-tittle-value">
            <span class="show-line-title">激活率	
                                </span>
            <span class="show-line-value" id="act_rate"></span>
        </div>
        <div class="show-tittle-value">
            <span class="show-line-title">实名率	
                                </span>
            <span class="show-line-value" id="real_rate"></span>
        </div>
    </div>
    <div id="mychar-show"></div>
</div>
<script>
    $("#mychar-show").height($("#dhh-hometotal").height() - 115).width($("#dhh-hometotal").width());
    layui.use(['laydate', 'table'], function() {
        var laytab = layui.table;
        var mychar_show = $("#mychar-show")[0];
        var nowDate = new Date(new Date().getTime() - 24 * 3600 * 1000);
        var mychar = echarts.init(mychar_show);
        //laydate 时间控件
        function laydateOPtion(ele, fn) {
            return {
                elem: ele, //需显示日期的元素选择器
                event: 'click', //触发事件
                type: "date",
                istime: false, //是否开启时间选择
                isclear: true, //是否显示清空
                istoday: true, //是否显示今天
                issure: true, //是否显示确认
                festival: true, //是否显示节日
                lang: "zh-CN",
                fixed: false, //是否固定在可视区域
                zIndex: 99999999, //css z-index
                btns: ['confirm'],
                done: fn,
                max: (function() {
                    var s = new Date();
                    return s.getFullYear() + "-" + (s.getMonth + 1) + "-" + s.getDate()
                }())
            }
        }
        // //渲染图表
        function renderBar(data) {
            var date = [];
            var renderData = {
                uv: [],
                acts: [],
                zhuce: [],
                reals: []
            }
            var d = data;
            for (var i = 6; i > -1; i--) {
                var val = d["day" + i].time.substr(-4).split("-");
                date.push(val[0] + "月" + val[1].replace("0", "") + "日");
                renderData.uv.push({
                    value: d["day" + i].uv
                });
                renderData.acts.push({
                    value: d["day" + i].acts
                });
                renderData.zhuce.push({
                    value: d["day" + i].zhuce
                });
                renderData.reals.push({
                    value: d["day" + i].reals
                });
            }
            var op = {
                tooltip: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['line', 'bar', 'stack', 'tiled']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: {
                    bottom: 10,
                    data: ['今日UV', '今日注册', '今日激活', '今日实名']
                },
                color: ["#5b9bd5", "#ed7d31", "#a5a5a5", "#ffc000"],
                title: {
                    width: "100%",
                    left: "50%",
                    top: 15,
                    text: "最近7天数据统计",

                },
                yAxis: [{
                    type: 'value'
                }],
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    data: date
                }],
                series: [{
                    name: '今日UV',
                    type: 'bar',
                    barGap: 0,
                    label: "一月",
                    data: renderData.uv
                }, {
                    name: '今日激活',
                    type: 'bar',
                    barGap: 0,
                    label: "一月",
                    data: renderData.acts
                }, {
                    name: '今日注册',
                    type: 'bar',
                    barGap: 0,
                    label: "一月",
                    data: renderData.zhuce
                }, {
                    name: '今日实名',
                    type: 'bar',
                    barGap: 0,
                    label: "一月",
                    data: renderData.reals
                }]
            }
            mychar.setOption(op, true);
        }
        var isFirst = true;
        //获取当天数据
        function getNowData() {

            var dt = {
                stime: "",
                etime: ""
            }
            if (isFirst) {
                isFirst = false;
            } else {
                dt.stime = $("#dhh-hometotal .stime").val(),
                    dt.etime = $("#dhh-hometotal .etime").val()
            }
            $.ajax({
                url: "/statistics/main",
                type: "get",
                async: false,
                data: dt,
                dataType: "json",
                beforeSend: function() {
                    loadIndex = layer.load(0);
                },
                success: function(d) {
                    layer.close(loadIndex);
                    if (d.result == '1') {
                        for (var i in d.rows.day0) {
                            $("#" + i).text(d.rows.day0[i]);
                        }
                        renderBar(d.rows);
                    } else {
                        layer.msg("无法获取今日数据！", {
                            icon: 0,
                            time: 2000
                        });
                    }
                },
                error: function() {
                    layer.close(loadIndex);
                    layer.msg("网络异常", {
                        icon: 0,
                        time: 2000
                    });
                }
            })
        }
        getNowData();
        //补0
        function zero(m) {
            return m < 10 ? "0" + m : m;
        }
        //获取当前时间
        $("#dhh-hometotal .etime").val((function() {
            var d = new Date();
            var y = d.getFullYear();
            var m = d.getMonth() + 1;
            var dy = d.getDate();
            return y + "-" + zero(m) + "-" + zero(dy);
        }()));

        function shat(_t) {
            var _result = {
                day: 0,
                hour: 0,
                minue: 0,
                sec: 0
            }
            if (_t > 0) {
                _result.day = Math.floor(_t / 1000 / 60 / 60 / 24) < 10 ? '0' + Math.floor(_t / 1000 / 60 / 60 / 24).toString() : Math.floor(_t / 1000 / 60 / 60 / 24).toString();
                _result.hour = Math.floor(_t / 1000 / 60 / 60 % 24) < 10 ? '0' + Math.floor(_t / 1000 / 60 / 60 % 24).toString() : Math.floor(_t / 1000 / 60 / 60 % 24).toString();
                _result.minue = Math.floor(_t / 1000 / 60 % 60) < 10 ? '0' + Math.floor(_t / 1000 / 60 % 60).toString() : Math.floor(_t / 1000 / 60 % 60).toString();
                _result.sec = Math.floor(_t / 1000 % 60) < 10 ? '0' + Math.floor(_t / 1000 % 60).toString() : Math.floor(_t / 1000 % 60).toString();
            }
            return _result;
        }
        layui.laydate.render(laydateOPtion("#dhh-hometotal .stime",
            function(value, date, endDate) {
                var eDateStr = $("#dhh-hometotal .etime").val();
                var sDateStr = value;
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {

                        layer.msg("开始时间不能大于等于结束时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {
                        if (shat(endDateTime - startDateTime).day >= 7) {

                            layer.msg("不能超过7天！", {
                                time: 3000,
                                icon: 0
                            });
                            var ele = this.elem[0];
                            setTimeout(function() {
                                ele.value = "";
                            }, 400);
                        } else {
                            getNowData();
                        }
                    }
                }

            }));
        layui.laydate.render(laydateOPtion("#dhh-hometotal .etime",
            function(value, date, endDate) {
                var eDateStr = value;
                var sDateStr = $("#dhh-hometotal .stime").val();
                if (sDateStr && eDateStr) {
                    var startDateTime = new Date(sDateStr).getTime();
                    var endDateTime = new Date(eDateStr).getTime();
                    if (endDateTime <= startDateTime) {

                        layer.msg("结束时间不能小于等于结束时间!", {
                            time: 3000,
                            icon: 0
                        });
                        var ele = this.elem[0];
                        setTimeout(function() {
                            ele.value = "";
                        }, 400);

                    } else {
                        if (shat(endDateTime - startDateTime).day >= 7) {

                            layer.msg("不能超过7天！", {
                                time: 3000,
                                icon: 0
                            });
                            var ele = this.elem[0];
                            setTimeout(function() {
                                ele.value = "";
                            }, 400);
                        } else {
                            getNowData();
                        }
                    }
                }

            }));
        $("#hometotal-search").on("click", function() {
            var loadindex = null;
            layer.open({
                type: 1,
                shade: 0.6,
                btn: false,
                title: "查看7天统计",
                area: [$(document).width() * 0.9 + "px", $(document).height() * 0.9 + "px"],
                content: "<table id='show-distributors' style='display:none;'></table>",
                success: function(r, index) {
                    laytab.render({
                        elem: '#show-distributors',
                        height: $("#show-distributors").height() - 40,
                        width: $("#show-distributors").width(),
                        url: "/statistics/main_table",
                        method: "get",
                        id: "usertables",
                        response: {
                            statusName: "result",
                            msgName: 'tips' //规定状态信息的字段名称，默认：msg
                                ,
                            countName: 'total' //规定数据总数的字段名称，默认：count
                                ,
                            dataName: 'rows',
                            statusCode: 1 //规定成功的状态码，默认：0
                        },
                        request: {
                            pageName: 'page' //页码的参数名称，默认：page
                                ,
                            limitName: 'lines' //每页数据量的参数名，默认：limit
                        },
                        done: function(d) {
                            $(".layui-none").text(d.tips);
                        },
                        where: {
                            stime: $("#dhh-hometotal .stime").val(),
                            etime: $("#dhh-hometotal .etime").val()
                        },
                        parseData: function(res) { //res 即为原始返回的数据
                            return {
                                "result": res.result, //解析接口状态
                                "tips": res.tips, //解析提示文本
                                "total": res.total, //解析数据长度
                                "rows": res.rows //解析数据列表
                            }
                        },
                        cols: [
                            [{
                                title: "日期",
                                field: "time",
                                unresize: true,
                            }, {
                                title: "当天UV数",
                                field: "uv",
                                unresize: true,
                            }, {
                                title: "当天注册",
                                field: "zhuce",
                                unresize: true,
                            }, {
                                title: "当天激活",
                                field: "acts",
                                unresize: true,
                            }, {
                                title: "当天实名",
                                field: "reals",
                                unresize: true,
                            }, {
                                title: "注册率",
                                field: "reg_rate",
                                unresize: true,
                            }, {
                                title: "激活率",
                                field: "act_rate",
                                unresize: true,
                            }, {
                                title: "实名率",
                                field: "real_rate",
                                unresize: true,
                            }, ]
                        ],
                        page: true,
                        limits: [20, 50, 100],
                        limit: 20,
                        loading: true,
                        skin: {
                            even: true
                        },
                    });

                }
            })
        });
    });
</script>